<template>
    <div id="file_man" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;">
                <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" :inline="true">
                        <el-form-item :label="$t('exvj2V8GpqP2MhDduCiCn')">
                            <el-select filterable v-model="searchOne" :placeholder="$t('vohXyEj2hWgiDNf8Pxpa')" style="width:120px;">
								<el-option
									v-for="item in fileLocationDictTypeDropDown"
									:key="item.code"
									:label="item.value"
									:value="item.code"
								/>
							</el-select>
                        </el-form-item>
                        <el-form-item :label="$t('dzLzuEpoPDsVvxsrVaM5')">
                            <el-input style="width:120px;" v-model="searchTwo" :placeholder="$t('bh64vtxQL5ITVbqgUz6')" />
                        </el-form-item>
                        <el-form-item :label="$t('vhy9gEyXYqv4JDebljOw5')">
                            <el-input style="width:250px;" v-model="searchThree" :placeholder="$t('ta4MnvOzYp3pmJtdTplx')" />
                        </el-form-item>
                        <el-form-item style="margin-right: 0">
                            <el-button @click="resetClick" icon="ele-Refresh"> {{ $t('eE3IedvHkKmnppI9FzCa7') }} </el-button>
                            <el-button @click="searchClick" type="primary" icon="ele-Search"> {{ $t('5fM07d4lwWlNvcG51m0ao') }} </el-button>
                            <el-upload
                                v-if="isUpload"
                                ref="uploadFile"
                                action="#"
                                multiple
                                :show-file-list="false"
                                :auto-upload='false'
                                :on-change="(file , getData) => { charterHandleChange( file , getData ) }"
                                :limit="1"
                                style="margin-left: 12px;"
                            >
                                <el-button icon="ele-Upload" type="primary"> {{ $t('rQfNgvUyJ5R0zebkLykk') }} </el-button>
                            </el-upload>
                            <el-button v-else type="primary">
                                <el-icon class="is-loading">
                                    <Loading />
                                </el-icon>
                                {{ $t('yUzUeFhFByzFMRnaq6l') }} </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;margin-top: 8px;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="hover" style="">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">

                                    <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                        <el-table-column type="index" :label="$t('mypbV2IeRm6WQyRbsoib')" width="55" align="center" :index="indexMethod" />
                                        <el-table-column :label="$t('ipUu8mbuoM5fZvVq5BMtu')"  min-width="160" show-overflow-tooltip align="center">
                                            <template #default="scope">
                                                <span v-for="item in fileLocationDictTypeDropDown" :key="item.code">
                                                    {{ Number(item.code) === Number(scope.row.fileLocation) ? item.value : '' }}
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="fileBucket" :label="$t('6mSLHdcn19uEuwFKpCgk')" min-width="200" show-overflow-tooltip align="center" />
                                        <el-table-column prop="fileOriginName" :label="$t('3jjkvuLf1XcSw7YveXw')" min-width="200" show-overflow-tooltip align="center" />
                                        <el-table-column prop="fileSuffix" :label="$t('9lq99VzCaWb60awnpxckD')" min-width="160" show-overflow-tooltip align="center" />
                                        <!-- <el-table-column prop="fileSizeInfo" label="文件大小" width="120" show-overflow-tooltip align="center" /> -->
                                        <el-table-column prop="fileObjectName" :label="$t('klaHlQnxhZizoOaIpDhto')" min-width="200" show-overflow-tooltip align="center" />
                                        <el-table-column :label="$t('zKDqLt0KBzwdoJgiQgoj')" min-width="200" align="center" >
                                            <template #default="scope">
                                                <el-button @click="fileDownload(scope.row)" class="icon-e" icon="ele-Download" size="small" text type="primary"> {{ $t('wfRysr47jmhGBv4I_7Ju') }} </el-button>
                                                
                                                <span style="margin:0 10px;" v-if="scope.row.fileSuffix === 'png' || scope.row.fileSuffix === 'jpeg' || scope.row.fileSuffix === 'jpg' || scope.row.fileSuffix === 'gif' || scope.row.fileSuffix === 'tif' || scope.row.fileSuffix === 'bmp'">
                                                    <el-button @click="lookClick(scope.row)" class="icon-e" icon="ele-View" size="small" text type="primary"> {{ $t('vv7NObYiqSJoBZu8XxZ8') }} </el-button>
                                                </span>

                                                <span style="margin:0 10px;" v-if="scope.row.fileSuffix === 'doc' || scope.row.fileSuffix === 'docx' || scope.row.fileSuffix === 'xls' || scope.row.fileSuffix === 'xlsx'">
                                                    <el-button @click="previewMicrosoft(scope.row)" class="icon-e" icon="ele-View" size="small" text type="primary"> {{ $t('oKcLiQHpbE2YccjTiRqF') }} </el-button>
                                                </span>
                                                
                                                <el-popconfirm
                                                    confirm-button-text="确认"
                                                    cancel-button-text="取消"
                                                    icon="InfoFilled"
                                                    icon-color="#626AEF"
                                                    :title="$t('w0AiVwUcoxhuhSFhbuv6g')"
                                                    @confirm="deleteHandle(scope.row , getData)"
                                                >
                                                    <template #reference>
                                                        <el-button v-if="$hasPer('process:del')" class="icon-e" icon="ele-Delete" size="small" text type="danger"> {{ $t('ko8YfTozEhXs5Fu8Vn9c') }} </el-button>
                                                    </template>
                                                </el-popconfirm>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <PreviewForm
            :lookInfo="lookInfo"
            :isLookDialog="isLookDialog"
            @cancelLookClick="cancelLookClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , onMounted , toRaw, Ref } from 'vue'
import getTableData from '/@/utils/getTableData'
import PreviewForm from './preview-form.vue'
import { sysFileInfoPage , sysFileInfoDelete , sysDictTypeDropDown , sysFileInfoUpload, sysFileInfoDownload } from '/@/api/manage/manage.ts'
export default defineComponent( {
    name: 'file_man',
    components: { PreviewForm },
    setup(props){
        const repairInfo = ref() // 传递子组件数据
        const auditOptions = ref()
        const auditValue = ref()
        const searchOne = ref()
        const searchTwo = ref()
        const searchThree = ref()
        const isUpload = ref(true)
        const fileLocationDictTypeDropDown = ref([])
        const lookInfo = ref('')
        const isLookDialog = ref(false)
        const uploadFile:Ref = ref(null)

        const searchObj = reactive({ })

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            if(searchOne.value !== undefined){
                Object.assign(searchObj,{fileLocation: Number(searchOne.value)}) // 存储位置
            }
            if(searchTwo.value !== undefined){
                Object.assign(searchObj,{fileBucket: searchTwo.value}) // 文件仓库
            }
            if(searchThree.value !== undefined){
                Object.assign(searchObj,{fileOriginName: searchThree.value}) // 文件名称
            }
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            searchOne.value = ''
            searchTwo.value = ''
            searchThree.value = ''

            Object.assign(searchObj,{fileLocation: 0})
            Object.assign(searchObj,{fileBucket: ''})
            Object.assign(searchObj,{fileOriginName: ''})
        }

        /*** charterHandleChange 上传事件改变时的钩子函数 */
        const charterHandleChange = async (data:any , updateFun: Function) => {
            isUpload.value = false
            const formData = new FormData()
            formData.append('file', data.raw)
            try {
                let res = await sysFileInfoUpload(formData)
                if(res.success){
                    isUpload.value = true
                    updateFun()
                }else{
                    isUpload.value = true
                }
            } catch (err) { 
                isUpload.value = true
            }
        }

        /*** fileDownload 下载文件 */
        const fileDownload = async (val:any) => {
            let param = {id: val.id}
            try {
                let res = await sysFileInfoDownload(param)
                downloadfile(res)
            } catch (err) { return }
        }
        const downloadfile = (res:any) => {
            let blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
            let contentDisposition = res.headers['content-disposition']
            let patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
            let result:any = patt.exec(contentDisposition)
            let filename = result[1]
            let downloadElement = document.createElement('a')
            let href = window.URL.createObjectURL(blob) // 创建下载的链接
            let reg = /^["](.*)["]$/g
            downloadElement.style.display = 'none'
            downloadElement.href = href
            downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href)
        }

        /*** 预览文件（微软插件）*/
        const previewMicrosoft = (val:any) => {
            window.open('https://view.officeapps.live.com/op/view.aspx?src=' + import.meta.env.VITE_API_URL + '/sysFileInfo/download?id=' + val.id)
        }

        /*** lookClick 预览 */
        const lookClick = (val:any) => {
            lookInfo.value = JSON.stringify(val)
            isLookDialog.value = true
        }

        /*** cancelLookClick 图片预览关闭 */
        const cancelLookClick = () => {
            isLookDialog.value = false
        }

        /*** GetDic 获取数据字典 */
        const GetDic = async () => {
            let param = {code : 'file_storage_location'}
            try {
                let res = await sysDictTypeDropDown(param)
                console.log(res,'数据字典')
                if(res.success){
                    fileLocationDictTypeDropDown.value = res.data
                }
            } catch (err) { return }
        }

        /*** deleteHandle 删除事件 */
        const deleteHandle = async (val: any , updateFun: Function) => {
            console.log(val,'val')
            try {
                let res = await sysFileInfoDelete(val)
                if(res.success){
                    updateFun()
                }
            } catch (err) { return }
        }

        onMounted(() => {
            GetDic()
        })



        return {
            ...getTableData(sysFileInfoPage,{},searchObj),
            repairInfo,
            auditOptions,
            auditValue,
            deleteHandle,
            searchOne,
            searchTwo,
            searchThree,
            resetClick,
            searchClick,
            charterHandleChange,
            isUpload,
            GetDic,
            fileLocationDictTypeDropDown,
            fileDownload,
            lookClick,
            isLookDialog,
            lookInfo,
            cancelLookClick,
            previewMicrosoft,
            uploadFile,
        }
    },
} )
</script>
<style scoped lang="scss">
    #file_man {
        :deep(.el-card__body) {
            height: 100%;
        }
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
</style>